<template>
  <div class="app-container">
    <el-card>
      <h4>账号管理</h4>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="账户安全" name="1">
          <el-alert
            type="warning"
            show-icon
            title="温馨提示：手机号、邮箱认证通过后可增强您账号的安全性，也可通过已认证的手机号、邮箱快速登录帐号。如需申请注销请
点击"
          ></el-alert>
          <ul>
            <li>
              <div class="name">
                <img src="@/assets/common/用户.png" alt="" />
                用户名
              </div>
              <div class="nameId">{{ userList.username }}</div>
              <!-- <div class="btn">
                <el-button
                  type="primary"
                  style="width: 160px"
                  @click="editDialog = true"
                  >修改</el-button
                >
              </div> -->
            </li>
            <li>
              <div class="name">
                <img src="@/assets/common/密码.png" alt="" />
                密码
              </div>
              <div class="nameId">上次登录时间：2024-11-13 08:47:38</div>
              <!-- <div class="btn">
                <el-button
                  type="primary"
                  style="width: 160px"
                  @click="setUpClick"
                  >设置</el-button
                >
              </div> -->
            </li>
            <!-- <li>
              <div class="name">
                <img src="@/assets/common/企业认证.png" alt="" />
                企业认证
              </div>
              <div class="nameId">
                认证企业提升企业信誉，您可以选择营业执照认证或负责人认证
              </div>
              <div class="btn">
                <el-button type="primary" style="width: 160px">查看</el-button>
              </div>
            </li> -->
            <li>
              <div class="name">
                <img src="@/assets/common/手机认证.png" alt="" />
                手机认证
              </div>
              <div class="nameId">您已认证：{{ userList.mobile }}</div>
              <div class="btn">
                <el-button
                  type="primary"
                  style="width: 160px"
                  @click="editPhone"
                  >修改</el-button
                >
              </div>
            </li>
            <!-- <li>
              <div class="name">
                <img src="@/assets/common/邮箱认证.png" alt="" />
                邮箱认证
              </div>
              <div class="nameId">认证后可使用邮箱登录，邮箱找回登录密码</div>
              <div class="btn">
                <el-button
                  type="primary"
                  style="width: 160px"
                  @click="emailDialog = true"
                  >立即认证</el-button
                >
              </div>
            </li> -->
          </ul>
          <!-- <div class="binding_warpper">
            <div class="binding_title">
              账号绑定<span style="font-size: 14px; color: #999"
                >(授权绑定后，可使用第三方帐号快速登录)</span
              >
            </div>
            <ul>
              <li>
                <div class="name">
                  <img src="@/assets/common/微信.png" alt="" />
                  微信
                </div>
                <div class="nameId">
                  绑定后可使用微信快速登录，随时接收面试通知
                </div>
                <div class="btn">
                  <el-button type="primary" style="width: 160px"
                    >立即绑定</el-button
                  >
                </div>
              </li>
              <li>
                <div class="name">
                  <img src="@/assets/common/qq.png" alt="" />
                  QQ
                </div>
                <div class="nameId">绑定后可使用QQ快速登录网站</div>
                <div class="btn">
                  <el-button type="primary" style="width: 160px"
                    >立即绑定</el-button
                  >
                </div>
              </li>
            </ul>
          </div> -->
        </el-tab-pane>
        <el-tab-pane label="登录日志" name="2">
          <el-table :data="formLoginList" style="width: 100%">
            <el-table-column prop="prop" label="登录时间" width="width">
              <template slot-scope="scope">
                {{ scope.row.addtime | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="登录ip" width="width">
              <template slot-scope="scope">
                {{ scope.row.ip }}
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="登录地址(仅供参考)"
              width="width"
            >
              <template slot-scope="scope">
                {{ scope.row.ipAddr }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="登录端" width="width">
              <template slot-scope="scope">
                {{ scope.row.platform }}
              </template>
            </el-table-column>
          </el-table>
          <el-row :gutter="10" type="flex" justify="end">
            <el-pagination layout="prev, pager, next" :total="50">
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="建议反馈" name="3">
          <div class="title">
            用户您好，请将您的意见、想法、建议或投诉内容告诉我们，以帮助我们为全体用户提供更加优质的服务。
            <br />
            我们将在第一时间及时回复您的反馈，如您的问题比较紧急，请致电服务热线：。
          </div>
          <el-form
            ref="opinionFormRef"
            :model="opinionForm"
            label-width="80px"
            style="margin-top: 20px"
            :rules="opinionFormRule"
          >
            <el-form-item label="意见类型" prop="type">
              <el-radio-group v-model="opinionForm.type">
                <el-radio-button :label="1">建议</el-radio-button>
                <el-radio-button :label="2">意见</el-radio-button>
                <el-radio-button :label="3">求助</el-radio-button>
                <el-radio-button :label="4">投诉</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="反馈内容" prop="content">
              <el-input
                v-model="opinionForm.content"
                placeholder=""
                type="textarea"
                :rows="7"
                style="width: 60%"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-button
                type="primary"
                style="width: 259px; height: 42px; margin-left: 100px"
                @click="submitFeedClick"
                >提交反馈</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 修改用户名 -->
    <el-dialog
      :visible.sync="editDialog"
      width="30%"
      title="修改用户名"
      center
      class="status_change"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="原用户名"> LC_15158371968 </el-form-item>
        <el-form-item label="新用户名">
          <el-input placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary">保存</el-button>
        <el-button @click="editDialog = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 设置 -->
    <el-dialog
      title="修改密码"
      :visible.sync="setUpDialog"
      width="30%"
      center
      class="edit_password"
    >
      <el-form
        ref="editPasswordRef"
        :model="formDataPassword"
        label-width="80px"
        :rules="passwordRules"
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="formDataPassword.mobile"
            placeholder=""
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="formDataPassword.newPassword"
            :type="passwordVisible ? 'text' : 'password'"
            placeholder=""
          >
            <!-- <template slot="suffix">
              <span
                class="el-icon-view"
                @click="togglePasswordVisibilit"
              ></span>
            </template> -->
          </el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repeatPassword">
          <el-input
            v-model="formDataPassword.repeatPassword"
            placeholder="请再次输入新密码"
            :type="passwordVisible ? 'text' : 'password'"
          >
            <!-- <template slot="suffix">
              <span
                class="el-icon-view"
                @click="togglePasswordVisibility"
              ></span>
            </template> -->
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="passwordSave">保存</el-button>
        <el-button @click="setUpDialog = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 邮箱认证 -->
    <el-dialog
      title="修改邮箱"
      :visible.sync="emailDialog"
      width="30%"
      center
      class="edit_email"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="邮箱账号">
          <el-input placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input placeholder="">
            <el-button
              slot="append"
              icon="el-icon-message"
              @click="getVerificationCode"
              >获取验证码</el-button
            >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary">保存</el-button>
        <el-button @click="emailDialog = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 手机号登录 -->
    <el-dialog title="修改手机号" :visible.sync="phonteDialog" width="25%">
      <div>
        <el-form ref="formPhoneRef" :model="formPhone" label-width="80px">
          <el-form-item label="旧手机号">
            <el-input
              v-model="formPhone.mobile"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input
              @keyup.native.enter="keyupEnter"
              v-model="formPhone.code"
              placeholder="请输入完验证码按Enter"
              style="width: 60%; display: inline-block"
            ></el-input>
            <el-button
              type="primary"
              style="width: 38%; display: inline-block; margin-left: 5px"
              @click="getVerificationCode"
              >获取验证码</el-button
            >
          </el-form-item>
          <el-form-item label="新手机号">
            <el-input
              v-model="formPhone.newMobile"
              placeholder="请输入新手机号"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="phonteDialog = false">取 消</el-button>
        <el-button type="primary" @click="phoneClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCodeByMobileApi,
  AddCompanyFeedbackApi,
  selAccountMessageByUidApi,
  selLoginLogApi,
  updateAccountByMobileApi,
  checkCodeApi,
  updateMobileByUidApi,
} from "@/api/account";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeName: "1",
      opinionType: 1,
      editDialog: false,
      setUpDialog: false,
      emailDialog: false,
      passwordVisible: false,
      phonteDialog: false,
      userList: {},
      // 修改密码
      formDataPassword: {
        code: 1,
        mobile: "",
        newPassword: "",
        repeatPassword: "",
      },
      // 建议反馈
      opinionForm: {
        content: "",
        type: 1,
        uid: "",
      },
      // 登录日志
      formLogin: {
        page: 1,
        pagesize: 10,
        uid: "",
      },
      // 手机号
      formPhone: {
        code: "",
        mobile: "",
        newMobile: "",
      },
      // 登录日志列表
      formLoginList: [],
      passwordRules: {
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        repeatPassword: [
          { required: true, message: "请输入重复密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.formDataPassword.newPassword) {
                callback(new Error("两次密码不一致"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      opinionFormRule: {
        content: [
          { required: true, message: "请输入反馈内容", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择反馈类型", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  watch: {
    async activeName(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
      if (newVal === "2") {
        this.formLogin.uid = this.userId;
        const res = await selLoginLogApi(this.formLogin);
        this.formLoginList = res.records;
      }
    },
  },
  created() {
    this.selAccountMessageByUid();
  },
  methods: {
    // 输入完验证码的逻辑
    async keyupEnter() {
      const res = await checkCodeApi({
        code: this.formPhone.code,
        mobile: this.formPhone.mobile,
      });
      console.log(res);
    },
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible;
    },
    // 渲染数据
    async selAccountMessageByUid() {
      const res = await selAccountMessageByUidApi(this.userId);
      this.userList = res.data;
    },
    // 手机认证
    editPhone() {
      this.phonteDialog = true;
      // this.$confirm(
      //   "您的手机已认证，修改认证手机您的登录手机号将同步修改，是否继续？",
      //   "系统提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // )
      //   .then(() => {
      //     this.$message({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
    },
    // 获取验证码
    async getVerificationCode() {
      try {
        const res = await getCodeByMobileApi({
          mobile: this.formPhone.mobile,
        });
        console.log(res);
        if (res.code === 1) {
          this.$message.success(res.data);
        } else {
          this.$message.error(res.msg);
        }
      } catch {
        this.$message.error("获取验证码失败");
      }
    },
    // 提交新手机号
    async phoneClick() {
      try {
        const res = await updateMobileByUidApi({
          newMobile: this.formPhone.newMobile,
          uid: this.userId,
        });
        console.log(res);
        if (res.code === 1) {
          this.$message.success("修改成功!");
          this.phonteDialog = false;
        } else {
          this.$message.error(res.msg);
        }
      } catch {
        this.$message.error(res.msg);
      }
    },
    // 点击修改密码
    setUpClick() {
      this.formDataPassword = this.userList;
      this.setUpDialog = true;
    },
    // 点击修改密码保存
    passwordSave() {
      this.$refs.editPasswordRef.validate(async (valid) => {
        if (valid) {
          console.log(this.formDataPassword);
          this.formDataPassword.code = 1;
          const res = await updateAccountByMobileApi(this.formDataPassword);
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab);
      console.log(event);
    },
    // 提交建议反馈
    submitFeedClick() {
      this.$refs.opinionFormRef.validate(async (valid) => {
        if (valid) {
          try {
            this.opinionForm.uid = this.userId;
            const res = await AddCompanyFeedbackApi(this.opinionForm);
            if (res.code === 1) {
              this.$message.success("感谢您的反馈,我们会尽快处理");
              this.opinionForm.content = "";
            } else {
              this.$message.error("提交失败");
            }
          } catch {
            this.$message.error("提交失败");
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scope>
ul {
  li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    line-height: 91px;
    display: flex;
    height: 91px;
    background: #fcfcfc;
    margin-bottom: 20px;
    img {
      position: absolute;
      left: 0;
      top: 35px;
    }
  }
}
.name {
  width: 146px;
  margin-left: 42px;
  color: #333;
  font-size: 16px;
  position: relative;
  padding-left: 30px;
}
.nameId {
  flex: 3;
  font-size: 14px;
  color: #666;
  position: relative;
  padding-left: 30px;
  overflow: hidden;
}
.btn {
  flex: 3;
  text-align: right;
  margin-right: 81px;
}
.binding_title {
  font-size: 18px;
  color: #333;
  padding: 20px 0;
}
.title {
  margin-left: 20px;
  line-height: 25px;
  font-size: 14px;
  color: #999;
}
.status_change {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}
.edit_password {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}
.edit_email {
  .el-dialog__header {
    background-color: #f3f3f3;
  }
}
</style>
